<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view  style="min-height: 100vh">
			<hx-navbar title="" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="collect_box">
				<view class="collect_name">
					{{collectName}}
					<view class="collect_num">
						/共<text style="color: #141519;">{{nums_count}}</text>个
					</view>
				</view>
				<view class="tips">默认按编号排序</view>
				<view class="collect_list">
					<!--  :style="[selStyle]" :class="{'cyz':item.give_status =='持有中' ? 'zsz':item.give_status =='转售中'}"-->
					<!-- :class="item.give_status =='持有中'?" collect_item [isActive ? activeClass : '', errorClass]-->
					<view class="collect_item "
						:class="[{ cyz: item.give_status =='持有中'},{ zsz: item.give_status =='转售中'}]" :style="[selStyle]"
						v-for="item, id in nums_list" :key="id" @tap="go_detail(item.sn)">
						<view class="collect_code">
							#{{item.goods_code}}
						</view>
						<view class="collect_price">
							￥{{item.goods_price}}
						</view>
						<view class="status">
							{{item.give_status}}
						</view>
					</view>

				</view>
				<view class="see_more" @tap="next_page">
					{{nums_hasNextPage?'查看更多':'没有更多了'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体选中颜色
					'--selBcakborder': this.$store.state.selBcakborder, //选中背景线颜色
					'--onlyBackgournd': this.$store.state.onlyBackgournd, //单个背景颜色
					'--QianmenonlyBackgournd2': this.$store.state.QianmenonlyBackgournd2, //浅色单个背景颜色
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //浅色单个背景颜色
				},
				collectName: '',
				nums_list: [],
				tabId: 1,
				nums_count: 0,
				current_id: 0,
				nums_hasNextPage: true,
				userInfo: [],
				nums_limit: 12,
			}
		},
		onLoad(vals) {
			this.userInfo = JSON.parse(decodeURIComponent(vals.val));

			console.log('userInfo', this.userInfo);
			console.log('userInfo', this.userInfo.id);

			this.getList()

		},
		methods: {
			
			getList() {


				this.collectName = this.userInfo.name;
				this.nums_page = 1;
				this.nums_list = [];
				this.nums_hasNextPage = true
				this.nums_count = this.userInfo.count;
				this.current_id = this.userInfo.id;
				let data = {
					page: this.nums_page,
					limit: this.nums_limit,
					goods_id: this.current_id,
					status: this.tabId,
				}
				console.log("data---", data)
				this.$api.getMyGoodsListById(data, res => {
					console.log("status-", res)
					if (res.status) {
						this.nums_list = (res.data);
						console.log("	this.nums_list--", this.nums_list)
						this.nums_hasNextPage = res.data.length >= this.nums_limit;
					}
				})


			},
				go_detail: function(sn) {
							
							uni.navigateTo({
								url: '/pages/collection/collection_details?id=' + sn
							});
						}
				 
		},
		

	}
</script>

<style lang="scss" scoped>
	.collect_box {
		width: 100%;
		padding: 30rpx;
		margin-top: 10rpx;

		.collect_name {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #141519;
			font-weight: bold;

			.collect_num {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #5e5e5e;
			}
		}

		.tips {
			font-size: 24rpx;
			color: #363636;
			margin-top: 20rpx;
		}

		.collect_list {
			width: 100%;
			// min-height: 155rpx;
			// max-height: 800rpx;
			overflow: auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20rpx;


			.cyz {
				background-color: var(--QianmenonlyBackgournd);
			}

			.zsz {
				background-color: var(--QianmenonlyBackgournd2);
			}

			.collect_item {
				width: 220rpx;
				height: 135rpx;
				// background-color: var(--QianmenonlyBackgournd);
				// background-color: #FFF0F2;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
				padding-top: 42rpx;
				margin-right: 12rpx;
				margin-bottom: 20rpx;

				.status {
					display: inline-block;
					padding: 2rpx 10rpx 2rpx 19rpx;
					// background-color: #FCC9CB;
					background: var(--onlyBackgournd);
					border-radius: 0 20rpx 0 20rpx;
					font-size: 20rpx;
					color: #ffffff;
					// color:var(--selectColorSize);
					position: absolute;
					top: 0;
					right: 0;
				}

				.collect_code {
					font-size: 24rpx;
					color: #7A7A7A;
				}

				.collect_price {
					font-size: 28rpx;
					color: #141519;
					font-weight: bold;
				}
			}

			&>view:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.see_more {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #ABA9B4;
	}
</style>